<template>
  <div>
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/task' }">任务管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/showTask/' + this.taskid }">任务详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
	<div class="xq">
		 <div class="icon">
      <i class="el-icon-edit-outline"></i>
    </div>
    
    <b><span class="top">任务详情</span></b>
	</div>
   
    
    <el-form :model="pojo" label-position="right" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务名称">
            <el-input v-model="pojo.taskName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务编号" >
           <el-input v-model="pojo.taskId" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="充电站名称" >
            <el-input v-model="pojo.cname" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="充电站负责人">
			   <el-input v-model="pojo.uname" disabled></el-input>
          <!-- <el-select v-model="pojo.stationId" placeholder="请选择">
             <el-option v-for="item in strList" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select> -->
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工作周期">
			     <el-input v-model="pojo.workCycle" disabled></el-input>
           <!-- <el-select v-model="pojo.cycle" placeholder="请选择工作周期">
              <el-option label="日" value="日"></el-option>
              <el-option label="周" value="周"></el-option>
              <el-option label="月" value="月"></el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务类型">
			   <el-input v-model="pojo.taskType" disabled></el-input>
           <!-- <el-select v-model="pojo.taskType" placeholder="请选择任务类型">
              <el-option label="抢修任务" value="抢修任务"></el-option>
              <el-option label="巡检任务" value="巡检任务"></el-option>
              <el-option label="消警任务" value="消警任务"></el-option>
            </el-select> -->
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
         <el-form-item label="开始时间">
            <el-input v-model="pojo.startTime" disabled></el-input>
            <!-- <el-date-picker v-model="pojo.startTime" type="datetime" placeholder="选择日期时间" style="width: 100%"></el-date-picker> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间">
			   <el-input v-model="pojo.endTime" disabled></el-input>
            <!-- <el-date-picker v-model="pojo.endTime" type="datetime" placeholder="选择日期时间" style="width: 100%"></el-date-picker> -->
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="执行人员">
			    <el-input v-model="pojo.zname" disabled></el-input>
          <!-- <el-select v-model="pojo.zname" placeholder="请选择" >
             <el-option v-for="item in strList" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务状态">
            <el-input v-model="pojo.status" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="任务说明">
            <el-input type="textarea" v-model="pojo.task" :rows="4" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
	
	import {findTaskById} from "@/api/task/Task"; // 确保此路径正确
export default {
  data() {
  	return {
  		pojo: {},
		taskid:"",
		strList:""
  	}
  },
  
  methods: {
	   
	  findTaskById() {
		  console.log(this.taskid);
	  	findTaskById(this.taskid).then(res => {
	  		this.pojo=res
	  		console.log(res)
	  	}).catch(error => {
	  		console.error("获取用户列表失败:", error);
	  	});
	  }
	
	  
	  
	  
  },
  created() { 
	this.taskid = this.$route.params.id;
	this.findTaskById()
   
	
	
  }
}
</script>

<style scoped>
.title {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

.top {
  font-size: 15px;
  margin-left: 50px;
}

.icon {
  width: 30px;
  height: 30px;
  background-color: skyblue;
  align-items: center;
  text-align: center;
  margin-bottom: -25px;
  font-size: 20px;
  margin-left: 0px;
}

.el-form-item__label {
  font-weight: bold;
  color: #606266;
}

.el-input, .el-select, .el-date-picker {
  width: 100%;
}
.xq{
	margin-left: 50px;
	margin-bottom: 20px;
}
</style>